<template>
  <div>
    <el-upload
      :action="url"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-error="handleUploadFail"
      :on-success="handleUploadSuccess"
      :on-exceed="handleExceed"
      :file-list="baseImgUrl"
      :with-credentials="true"
      :headers="headersData"
      name="files"
      :limit="4"
      list-type="picture-card">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<style scoped>
</style>

<script>
import {getToken} from '@/utils/LocalDataUtil'
import config from '@/config/index'
export default {
  model: {
    prop: 'imgUrl',
    event: 'updateImgUrl'
  },
  props: {
    imgUrl: Array
  },
  data () {
    return {
      fileList: [],
      headersData: {},
      url: ''
    }
  },
  components: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.url = config.serverUrl() + '/image/'
      this.headersData.token = getToken()
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove (file, fileList) {
      let imgArr = []
      for (let i = 0; i < fileList.length; i++) {
        const element = fileList[i].url.replace(this.url, '')
        imgArr.push(element)
      }
      this.fileList = imgArr
      this.$emit('updateImgUrl', imgArr)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleUploadSuccess (response, file, fileList) {
      let _this = this
      if (response && response.code === '200' && response.data) {
        let imagePath = response.data[0]
        console.log(imagePath)
        // let imageUri = this.buildUri(imagePath)
        // let fileObj = {name: 'test', url: imageUri}
        if (this.imgUrl) {
          this.fileList = this.imgUrl
        }
        _this.fileList.push(imagePath)
        _this.$emit('updateImgUrl', _this.fileList)
      } else {
        let message = `上传失败，原因：` + response.message
        this.$message.error(message)
      }
    },
    handleUploadFail (err, file, fileList) {
      console.log(err)
      console.log(file)
      console.log(fileList)
    },
    handleExceed (files, fileList) {
      this.$message.error('只能上传四张图片!')
    },
    clearFileList () { // 初始化fileList
      this.fileList = []
    },
    buildUri (path) {
      if (path && path !== '') {
        return this.url + path
      }
      return null
    }
  },
  computed: {
    baseImgUrl: function () {
      let arr = []
      if (this.imgUrl && this.imgUrl.length > 0) {
        for (let i = 0; i < this.imgUrl.length; i++) {
          const element = this.imgUrl[i]
          let obj = {}
          obj.name = 'IMG_' + i
          obj.url = this.buildUri(element)
          arr.push(obj)
        }
      }
      return arr
    }
  }
}
</script>
